#app-cad_root {
  --color-info: #228be6;

  --color-gray-1: #f9fafb;
  --color-gray-2: #f1f3f5;
  --color-gray-3: #e7eaed;
  --color-gray-4: #e2e4e6;
  --color-gray-5: #d5d8db;
  --color-gray-6: #bbbfc4;
  --color-gray-7: #a6abb2;
  --color-gray-8: #717780;
  --color-gray-9: #27292a;
  --color-gray-10: #191a1b;

  --color-primary-bg: #f2f2ff;
  --color-primary-bg-hover: #e8e8f8;
  --color-primary-border: #c3c3d6;
  --color-primary-border-hover: #a0a0be;
  --color-primary-hover: #7b7ba2;
  --color-primary-active: #3f3f73;
  --color-primary-text-hover: #363664;
  --color-primary-text: #2c2c52;
  --color-primary-text-active: #1f1f3a;

  --color-bg-container: #ffffff;
  --color-bg: var(--color-gray-1);
  --color-bg-selected: var(--color-gray-4);
  --color-bg-primary-selected: var(--color-primary);
  --color-item-bg-hover: var(--color-gray-2);
  --color-item-bg-active: var(--color-primary-bg);

  --color-text: #000000e0;
  --color-text-heading: #000000cc;
  --color-text-description: #000000cc;
  --color-text-placeholder: #73000000;
  --color-text-disabled: #00000020;
  --color-text-light-solid: var(--color-primary);

  --color-icon: var(--color-gray-9);
  --color-icon-secondary: var(--color-gray-8);
  --color-icon-disabled: var(--color-gray-6);
  --color-icon-primary: var(--color-primary);
  --color-icon-invert: white;

  --color-border: var(--color-gray-5);
  --color-split: var(--color-gray-3);

  --color-primary: #464681;
  --color-primary-rgb: 0, 118, 168;
  --color-primary800: #464681;
  --color-primary700: #5b5b96;
  --color-primary600: #62629c;
  --color-primary500: #7b7ba2;
  --color-primary400: #8f8fb5;
  --color-primary300: #a0a0be;
  --color-primary200: #c3c3d6;
  --color-primary100: #e8e8f8;

  --color-sourceAssignment: #25b4e2;
  --color-sourceAssignment300: #bde8f6;
  --color-sourceAssignment200: #d3f0f9;
  --color-sourceAssignment100: #e9f7fc;

  --color-targetAssignment: #ed6f82;
  --color-targetAssignment300: #fad4d9;
  --color-targetAssignment200: #fbe2e6;
  --color-targetAssignment100: #fdf0f2;

  --color-additionalAssignment: #8ebc0a;
  --color-additionalAssignment300: #e4fbc7;
  --color-additionalAssignment200: #f5ffe8;
  --color-additionalAssignment100: #f9fff3;

  --color-success: #12b886;
  --color-success300: #4dcaa4;
  --color-success200: #89dcc3;
  --color-success100: #c4ede1;

  --color-error: #ec5b56;
  --color-error300: #f18480;
  --color-error200: #f6adab;
  --color-error100: #fad6d5;

  --color-warning: #fda414;
  --color-warning300: #febb4f;
  --color-warning200: #fed28a;
  --color-warning100: #ffe8c4;

  --color-grey: #333333;
  --color-grey800: #4c4c4c;
  --color-grey750: #595959;
  --color-grey700: #666666;
  --color-grey650: #737373;
  --color-grey600: #7f7f7f;
  --color-grey550: #8c8c8c;
  --color-grey500: #999999;
  --color-grey450: #a5a5a5;
  --color-grey400: #b2b2b2;
  --color-grey350: #bfbfbf;
  --color-grey300: #cccccc;
  --color-grey250: #d9d9d9;
  --color-grey200: #e5e5e5;
  --color-grey150: #eeeeee;
  --color-grey100: #f6f6f6;
  --color-grey50: #fbfbfb;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;

  --color-viewer-bg: var(--color-grey100);
  --color-panel-border: var(--color-grey200);
  --color-academic-plan: var(--color-grey600);
  --color-community-plan: var(--color-grey600);
  --color-professional-plan: var(--color-primary);
  --color-team-plan: var(--color-success);
  --color-basic-plan: #cc9c00;
  --color-enterprise-plan: #b882d4;
  --color-partner-plan: #b882d4;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;

  --settings-panel-vertical-spacing: var(--spacing-2);
  --settings-panel-horizontal-spacing: var(--spacing-3);
  --settings-panel-width: 420px;
  --settings-panel-width--slim: 290px;
  --leftSidePanelWidth: 250px;
  --rightSidePanelWidth: 250px;
}
